import React from 'react'
import './index.scss'
import type { FormProps } from 'antd'
import { Button, Checkbox, Form, Input, message } from 'antd'
import { useNavigate } from 'react-router-dom'
import { fetchLogin } from '@/store/modules/user'
import { useDispatch } from 'react-redux'

const Login = () => {
	type FieldType = {
		username?: string
		password?: string
		remember?: string
	}

	const navigate = useNavigate()
	const dispatch = useDispatch()

	const onFinish: FormProps<FieldType>['onFinish'] = async values => {
		dispatch<any>(fetchLogin(values))
		console.log('Success:', values)
		navigate('/')
		message.success('登录成功')
	}

	const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = errorInfo => {
		console.log('Failed:', errorInfo)
	}

	return (
		<div className="login">
			<div className="container">
				<div className="left"></div>
				<div className="right">
					<div className="right-logo"></div>
					<div className="right-title">演示Demo</div>
					<div className="right-form">
						<Form
							name="basic"
							size="large"
							labelCol={{ span: 6 }}
							wrapperCol={{ span: 16 }}
							style={{ maxWidth: 600 }}
							initialValues={{ remember: true, username: 'shaoyuan', password: '123456' }}
							onFinish={onFinish}
							onFinishFailed={onFinishFailed}
							autoComplete="off">
							<Form.Item<FieldType>
								label="用户名"
								name="username"
								rules={[{ required: true, message: '用户名不能为空' }]}>
								<Input />
							</Form.Item>

							<Form.Item<FieldType>
								label="密码"
								name="password"
								rules={[{ required: true, message: '密码不能为空' }]}>
								<Input.Password />
							</Form.Item>

							<Form.Item<FieldType>
								name="remember"
								valuePropName="checked"
								wrapperCol={{ offset: 6, span: 16 }}>
								<Checkbox>记住密码</Checkbox>
							</Form.Item>

							<Form.Item wrapperCol={{ offset: 12, span: 16 }}>
								<Button
									type="primary"
									htmlType="submit">
									登录
								</Button>
							</Form.Item>
						</Form>
					</div>
				</div>
			</div>
		</div>
	)
}

export default Login
